<template>
	<div>
		<!-- <div style="display: flex; justify-content:space-around" > -->
		<van-button icon="plus" type="primary" size="large" @click="drawer = true">添加人员</van-button>
		<!-- <van-button icon="minus" type="primary" @click="drawer = true">删除人员</van-button>
		<van-button icon="edit" type="primary" @click="drawer = true">修改人员</van-button> -->
		<!-- </div> -->
		<el-drawer
		  size="80%"
		  title="添加人员"
		  :visible.sync="drawer"
		  :direction="direction"
		>
		  <el-input style="padding: 10px;" v-model="name" placeholder="请输入要添加人员名称"></el-input>
		  <el-input style="padding: 10px;" v-model="phone" placeholder="请输入要添加人员手机号码"></el-input>
		  <el-button type="primary" v-on:click='add_user()'   style="display: block; width: 80%; margin: 10px auto;" >添加人员基本信息</el-button>
		</el-drawer>
		
		
		<!-- 人员列表展示 -->
		<!-- <van-cell v-for="item in item_list" :title="item.name" :value="item.phone" /> -->

		<van-swipe-cell v-for="item in item_list">
		  <van-cell  :title="item.name" :value="item.phone" />
		  <template #right>
		    <van-button square type="danger" text="删除" @click="del_user(item.id)"/>
		    <van-button square type="info" text="改名" @click="updateUserClick(item.id, item.name)"/>
		    <van-button square type="warning" text="改电话" @click="updatePhoneClick(item.phone, item.id, item.name)"/>
		  </template>
		  
		</van-swipe-cell>
		
		
		<el-drawer
		  size="80%"
		  title="修改姓名"
		  :visible.sync="updateUser"
		  :direction="direction"
		>
		
			<div>当前姓名:{{name}}</div>
		  <el-input style="padding: 10px;" v-model="new_name" placeholder="请输入更新后的名子"></el-input>
		 
		  <el-button type="primary" v-on:click='update_user(user_id, new_name)'   
		  style="display: block; width: 80%; margin: 10px auto;" >
		  修改姓名
		  </el-button>
		</el-drawer>
		
		<el-drawer
		  size="80%"
		  title="修改电话"
		  :visible.sync="updatePhone"
		  :direction="direction"
		>
		
			<div>当前姓名:{{name}},当前电话:{{phone}}</div>
		  <el-input style="padding: 10px;" v-model="new_phone" placeholder="请输入更新后的电话"></el-input>
		 
		  <el-button type="primary" v-on:click='update_phone()'   
		  style="display: block; width: 80%; margin: 10px auto;" >
		  修改电话
		  </el-button>
		</el-drawer>
		
		
	</div>
</template>

<script>
	import {
		show_all_user_url,
		add_user_url,
		del_user_url,
		update_user_url,
		update_phone_url

	} from "../../utils/setting.js"
	
	// from vant import Notify
	// import Notify from 'vant'
	export default {
		name: '',
		components: {},
		props: {},
		data() {
			return {
				item_list: [{
					'id': 1,
					'unit_name': '根'
				}, {
					'id': 2,
					'unit_name': '米'
				}],
				drawer: false,
				updateUser: false,
				updatePhone: false,
				direction: 'ttb',
				phone: '',
				name: '',
				user_id:'',
				new_name: '',
				new_phone: '',

				
			}
		},
		methods: {
			add_user() {

				if (this.phone == '' || this.name == '') {

					this.$message({
						message: "请输入人员名称和电话",
						type: 'error'
					})

					return
				}
				// console.log(this.phone)
				// console.log(this.phone.slice(-6))
				this.$axios({
					method: 'POST',
					url: add_user_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						phone: this.phone,
						name: this.name,
						password: this.phone.slice(-6)
					})
				}).then((response) => { //这里使用了ES6的语法
					console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {


						this.$message({
							message: "人员：" + this.name + "   添加成功",
							type: 'success'
						})
						
						this.$notify({ type: 'success', message: '通知内容' });

						this.get_all_user()
					} else {
						console.log(response.data.errorMsg)
						this.$Message.error('config')
						this.$message({
							message: response.data.errorMsg + '!!!',
							type: 'error'
						})
					}
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			get_all_user() {

				this.$axios({
					method: 'GET',
					url: show_all_user_url,
					params: {
						limit: 1000
					}
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.item_list = response.data.resultBody.reverse()
					console.log(this.item_list)
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},
		
			del_user(user_id){
				this.$axios({
					method: 'POST',
					url: del_user_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						user_id: user_id,

					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						
						this.$notify({ type: 'success', message: '删除成功' });
						this.get_all_user()
				
						
					} else {
						// console.log(response.data.errorMsg)
						this.$notify({ type: 'error', message: '危险删除，如确需删除请联系系统管理员，具体原因：' + response.data.errorMsg });
					}
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},
		
			update_user(user_id, new_name){
				this.$axios({
					method: 'POST',
					url: update_user_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						user_id: user_id,
						new_name: new_name
				
					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
							
					this.$notify({ type: 'success', message: response.data.resultBody });
					this.get_all_user()
					this.updateUser = false
					// location.reload();
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},
			updateUserClick(user_id,user_name){
				this.name = user_name
				this.new_name = user_name
				this.user_id = user_id
				this.updateUser = true
			},
		
			updatePhoneClick(phone, user_id, user_name){
				// this.$notify({ type: 'sucess', message: '还在施工中。。。' })
				this.name = user_name
				this.new_name = user_name
				this.phone = phone
				this.new_phone = phone
				this.user_id = user_id
				this.updatePhone = true
				
			},
			
			update_phone(){
				this.$axios({
					method: 'POST',
					url: update_phone_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						user_id: this.user_id,
						phone: this.new_phone
				
					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
							
					this.$notify({ type: 'success', message: response.data.resultBody });
					this.get_all_user()
					this.updatePhone = false
					// location.reload();
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			}
			
			
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {

			this.get_all_user()

		},
	}
</script>

<style scoped lang="less">
	
</style>
